
<template>
  <!-- 商品评价列表 -->
  <div>
    <ul>
      <li v-for="(item,index) in evaluateList" :key="index" class="evaluate-item">
        <div class="item-head">
          <headPortrait-box
            class="img-box pos-r br-full is-60"
            :head-portrait-url="item.UserFace"
          />
          <div class="ml-20">
            <p class="fs-24">
              <span>{{ item.NickName }}</span>
              <level-box class="" :grade-info="item.GradeInfo" />
            </p>
            <p class="fs-20 color-gray-light">{{ item.AddTime }}</p>
          </div>
        </div>
        <p class="text-show-line-2 mt-10">{{ item.Msg }}</p>
        <p v-show="item.Attribute" class="color-gray-light mt-10">{{ item.Attribute }}</p>
        <div v-show="item.ImagesList" class="shop-img">
          <imgBox v-for="(ite,ind) in item.ImagesList" :key="ind" :img-url="ite" class="img" :show-big-picture="showBigPicture" />
        </div>
        <div v-show="item.ReplyMsg" class="evaluate-item-replay color-gray-light">商家回复：{{ item.ReplyMsg }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import levelBox from 'components/levelBox-1'
import imgBox from 'components/imgBox'
export default {
  name: 'ProductEvaluate',
  components: {
    headPortraitBox,
    levelBox,
    imgBox
  },
  props: {
    evaluateList: { // 评价列表
      type: Array,
      required: true,
      default: function() {
        return []
      }
    }

  },
  data() {
    return {
      showBigPicture: true
    }
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
// 评价
.evaluate-item{
  padding: 30px 0;
    &:not(:first-child){
    border-top: 1px solid $colorBorder;
    }
    &:last-child{
      padding-bottom: 0;
    }
  .item-head{
    @include flex-content(flex-start, center);
  }
  .shop-img{
    .img{
      display: inline-block;
      width:152px;
      height: 152px;
      object-fit: cover;
      margin-top: 30px;
      margin-right: 26px;
      &:nth-child(4n){
        margin-right: 0;
      }
    }
  }
  .evaluate-item-replay{
    padding: 24px;
    background: $colorF6;
    margin-top: 20px;
    border-radius: 8px;
    position: relative;
    &:after{
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: transparent transparent $colorF6;
      top: -20px;
      left: 40px;
    }
  }
}
</style>
